<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" inline label-width="120px">
      <el-form-item label="活动" prop="activityId">
        <el-select @change="selectActivityChange" ref="selectActivity" v-model="dataForm.activityId" :disabled="disabled" clearable filterable remote placeholder="请选择"
                   :remote-method="getActivityList"
                   class="width185">
          <el-option
            v-for="item in activityList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品" prop="goodsId">
        <el-select v-model="dataForm.goodsId" :disabled="disabled" clearable filterable remote placeholder="请选择"
                   :remote-method="remoteGoodsMethod"
                   class="width185">
          <el-option
            v-for="item in goodsList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
<!--      <el-form-item v-if="dataForm.activityId !== 'de6ab9e04742fd5f4cb48500bd2b8a46'" label="展示时间" prop="dayOfWeek" >-->
<!--        <el-input v-model="dataForm.dayOfWeek" :disabled="disabled"style="width: 300px" placeholder="英文逗号分割，周日为1，周一为2……"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="展示" prop="dayOfWeek" >
        <el-input-number v-model="selectTimeIndex" :min="0" :max="selectTimes.length-1" label="数量"></el-input-number>
        <span>{{selectTimes[selectTimeIndex]}}</span>
      </el-form-item>

<!--  今日秒杀    -->
<!--      <div v-if="dataForm.activityId === 'de6ab9e04742fd5f4cb48500bd2b8a46'">-->

      <el-form-item label="剩余可抢数量" prop="expendCount" >
        <el-input-number v-model="dataForm.expendCount" :min="0" :max="1000" label="数量"></el-input-number>
      </el-form-item>
<!--        <el-form-item label="金额" prop="price" >-->
<!--          <el-input-number v-model="dataForm.price" :precision="2" :min="1" :max="10000" label="金额"></el-input-number>-->
<!--        </el-form-item>-->
      <el-form-item label="中奖概率" prop="probability" >
        <el-input-number v-model="dataForm.probability" :min="0" :max="1000" label="中奖概率"></el-input-number>
      </el-form-item>
      <el-form-item label="排序" prop="sort" >
        <el-input-number v-model="dataForm.sort" :min="0" :max="1000" label="排序"></el-input-number>
      </el-form-item>
      <el-form-item label="白名单等级" prop="whitelistGrade">
        <input type="checkbox" id="dj1" value="1" v-model="dataForm.whitelistGrade">
        <label for="dj1">等级1</label>
        <input type="checkbox" id="dj2" value="2" v-model="dataForm.whitelistGrade">
        <label for="dj2">等级2</label>
        <input type="checkbox" id="dj3" value="3" v-model="dataForm.whitelistGrade">
        <label for="dj3">等级3</label>
        <input type="checkbox" id="dj4" value="4" v-model="dataForm.whitelistGrade">
        <label for="dj4">等级4</label>
        <input type="checkbox" id="dj5" value="5" v-model="dataForm.whitelistGrade">
        <label for="dj5">等级5</label>
      </el-form-item>
<!--      </div>-->

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button v-if="!disabled" type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        disabled: false,
        visible: false,
        activityList: [],
        goodsList: [],
        selectTimeIndex: null,
        selectTimes: [],
        dataForm: {
          id: 0,
          dayOfWeek:'',
          activityId: '',
          goodsId: '',
          count: 10,
          price: 10,
          expendCount: 10,
          whitelistGrade:[]
        },
        dataRule: {
          dayOfWeek: [
            {required: true, message: '展示时间不能为空', trigger: 'blur'}
          ],
          goodsId: [
            {required: true, message: '商品不能为空', trigger: 'blur'}
          ],
          activityId: [
            {required: true, message: '活动不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      selectActivityChange(){
        let index = this.$refs.selectActivity.hoverIndex
        if(index && index !== -1){
          this.selectTimes = JSON.parse(this.activityList[index].activityTime)
        }
      },
      init (id, disabled) {
        this.disabled = disabled
        this.dataForm.id = id || ''
        this.visible = true
        this.dataForm.count = 10
        this.dataForm.price = 10
        this.selectTimeIndex = null
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: `/mall/goodstoactivity/info/${this.dataForm.id}`,
              method: 'get'
            }).then(async ({data}) => {
              if (data && data.code === 0) {
                await this.$http({
                  url: `/mall/activity/info/${data.goodstoactivity.activityId}`,
                  method: 'get'
                }).then(({data}) => {
                  if (data && data.code === 0) {
                    this.activityList = [data.activity]
                    this.selectTimes = JSON.parse(data.activity.activityTime)
                  }
                })
                await this.$http({
                  url: `/mall/goods/info/${data.goodstoactivity.goodsId}`,
                  method: 'get'
                }).then(({data}) => {
                  if (data && data.code === 0) {
                    this.goodsList = [data.goods]
                  }
                })
                this.dataForm = data.goodstoactivity
                if(this.dataForm.price){
                  this.dataForm.price = this.dataForm.price / 100
                  this.selectTimeIndex = this.dataForm.dayOfWeek
                }
                this.dataForm.whitelistGrade=this.dataForm.whitelistGrade?this.dataForm.whitelistGrade.split(','):[]
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        if(this.selectTimeIndex !== null){
          this.dataForm.dayOfWeek = this.selectTimeIndex
        }
        this.$refs['dataForm']
          .validate((valid) => {
            if (valid) {
              this.dataForm.price = this.dataForm.price * 100
              this.dataForm.whitelistGrade=this.dataForm.whitelistGrade?this.dataForm.whitelistGrade.join():'';
              this.$http({
                url: `/mall/goodstoactivity/${!this.dataForm.id ? 'save' : 'update'}`,
                method: 'post',
                data: this.dataForm
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500
                  })
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            }
          })
      },
      getActivityList (query) {
        if (query !== '') {
          this.$http({
            url: `/mall/activity/queryAll`,
            method: 'get',
            params: {},
            data: this.dataForm
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.activityList = data.list
            }
          })
        }
      },
      remoteGoodsMethod (query) {
        if (query !== '') {
          this.$http({
            url: `/mall/goods/queryAll`,
            method: 'get',
            params: {
              'name': query
              // 'isOnSale': 0
            },
            data: this.dataForm
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.goodsList = data.list
            }
          })
        }
      }
    }
  }
</script>
